<script setup lang="ts">
import type { VxeGridProps } from '#/adapter/vxe-table';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

const props = defineProps(['data']);
interface RowType {
  id: number;
  platform_name: string;
  create_at: string;
}
const gridOptions: VxeGridProps<RowType> = {
  columns: [
    { title: '账户', field: 'account' },
    { title: '买卖方向', field: 'side', slots: { default: 'side' } },
    { title: '下单价格', field: 'price' },
    { title: '成交价格', field: 'ave_price' },
    { title: '下单数量', field: 'quantity' },
    { title: '成交数量', field: 'deal_quantity' },
    { title: '订单状态', field: 'status', slots: { default: 'status' } },
    {
      title: '交易状态',
      field: 'exchange_status',
      slots: { default: 'exchange' },
    },
  ],
  pagerConfig: {
    enabled: false,
  },
  data: props.data.orders.length > 0 ? props.data.orders : [],
};

const [Grid] = useVbenVxeGrid({ gridOptions });

const TRADE_STATUS = ['请求未成功', '挂单成功', '完成'];
const TRADE_STATUS_TAG = ['danger', 'primary', 'success'];
const TRADE_SIDE = ['BUY', 'SELL'];
const TRADE_SIDE_TAG = ['success', 'danger'];
const EXCHANGE_STATUS = {
  NEW: '新建订单',
  PARTIALLY_FILLED: '部分成交',
  FILLED: '全部成交',
  CANCELED: '已撤销',
  REJECTED: '订单被拒绝',
};
</script>
<template>
  <Grid>
    <template #side="{ row }">
      <el-tag size="small" :type="TRADE_SIDE_TAG[row.side - 1]">
        {{ TRADE_SIDE[row.side - 1] }}
      </el-tag>
    </template>
    <template #status="{ row }">
      <el-tag size="small" :type="TRADE_STATUS_TAG[row.status]">
        {{ TRADE_STATUS[row.status] }}
      </el-tag>
    </template>
    <template #exchange="{ row }">
      <el-tag size="small" v-if="row.exchange_status">
        {{ EXCHANGE_STATUS[row.exchange_status] }}
      </el-tag>
      <span></span>
    </template>
  </Grid>
</template>
